<!-- 页面外套 -->
<div class="page-wrapper" id="personnel_attendance_vacation">
    
    <!-- 数据网格 -->
    <div class="datagrid datagrid-striped" id="personnel_attendance_vacation_datagrid">

        <!-- 工具条组 -->
        <div class="tool-group">
            <div class="tool-search">
                <div class="im-label">
                    <div class="input-group">
                        <select class="form-control" id="personnel_attendance_vacation_tool_keys">
                            <option value="1">姓名</option>
                            <option value="2">工号</option>
                        </select>
                        <span class="input-group-addon fix-border fix-padding"></span>
                        <input type="text" class="form-control" id="personnel_attendance_vacation_tool_search">
                    </div>
                </div>
                <label id="personnel_attendance_vacation_tool_select_group"><!--JS推进--></label>
                <label><button class="btn btn-primary" id="personnel_attendance_vacation_search_btn"><i class="icon icon-search"></i> 搜索</button></label>
            </div>
        </div>
        <!-- tool-group -->

        <div class="datagrid-container"></div>
        <ul class="pager btn-mini" data-elements="prev,pages,next"></ul>
    </div>
    <!-- datagrid -->

    <!-- 修改盒子 -->
    <div class="modal modal-for-page fade" aria-hidden="false" id="personnel_attendance_vacation_edit_box">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">关闭</span></button>
                    <h4 class="modal-title"><!-- JS推进 --></h4>
                </div>
                <div class="modal-body">
                    <form class="container form-horizontal">
                        <div class="form-group require">
                            <label class="col-sm-2 required" for="personnel_attendance_vacation_edit_duration">修改时长</label>
                            <div class="col-sm-8">
                                <div class="input-group">
                                    <select class="form-control" id="personnel_attendance_vacation_edit_type"><!--JS推进--></select>
                                    <span class="input-group-addon fix-border fix-padding"></span>
                                    <input type="text" class="form-control" id="personnel_attendance_vacation_edit_duration" placeholder="请填写数字" style="width:258px;">
                                </div>
                            </div>
                        </div>
                        <div class="form-group require">
                            <label class="col-sm-2 required" for="personnel_attendance_vacation_edit_reason">修改原因</label>
                            <div class="col-sm-8"><input type="text" class="form-control" id="personnel_attendance_vacation_edit_reason"></div>
                        </div>
                        <ul class="nav nav-tabs">
                            <li class="active"><a data-tab href="#personnel_attendance_vacation_edit_tab1">修改记录</a></li>
                            <li><a data-tab href="#personnel_attendance_vacation_edit_tab2">调休时长</a></li>
                        </ul>
                        <div class="tab-content">
                            <div class="tab-pane active" id="personnel_attendance_vacation_edit_tab1">
                                <table class="table table-bordered">
                                    <thead>
                                        <tr class="hl-default">
                                            <th>修改</th>
                                            <th>备注</th>
                                            <th>修改人</th>
                                            <th>修改时间</th>
                                        </tr>
                                    </thead>
                                    <tbody><!-- JS推进 --></tbody>
                                </table>
                            </div>
                            <div class="tab-pane" id="personnel_attendance_vacation_edit_tab2">
                                <table class="table table-bordered">
                                    <thead>
                                        <tr class="hl-default">
                                            <th>加班时间</th>
                                            <th>加班转调休时长</th>
                                            <th>过期时间</th>
                                        </tr>
                                    </thead>
                                    <tbody><!-- JS推进 --></tbody>
                                </table>
                            </div>
                        </div>
                        <div class="clearfix"></div>
                        <div class="text-center">
                            <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                            <button type="button" class="btn btn-primary" id="personnel_attendance_vacation_edit_submit">保存</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    <!-- personnel_attendance_vacation_edit_box -->

</div>
<!-- page-wrapper -->

<script>
$(function(){

    //变量声明-----------------------------------------------------------------------------------------------
    var
    personnel_attendance_vacation                    = $("#personnel_attendance_vacation"),                     //页面ID
    personnel_attendance_vacation_datagrid           = $("#personnel_attendance_vacation_datagrid"),            //数据表格
    //搜索
    personnel_attendance_vacation_tool_keys          = $("#personnel_attendance_vacation_tool_keys"),           //搜索类别
    personnel_attendance_vacation_tool_search        = $("#personnel_attendance_vacation_tool_search"),         //搜索字段
    personnel_attendance_vacation_tool_select_group  = $("#personnel_attendance_vacation_tool_select_group"),   //下拉框组
    personnel_attendance_vacation_search_btn         = $("#personnel_attendance_vacation_search_btn"),          //搜索按钮
    //修改
    personnel_attendance_vacation_edit_box           = $("#personnel_attendance_vacation_edit_box"),            //修改盒子
    personnel_attendance_vacation_edit_type          = $("#personnel_attendance_vacation_edit_type"),           //修改类型
    personnel_attendance_vacation_edit_duration      = $("#personnel_attendance_vacation_edit_duration"),       //修改时长
    personnel_attendance_vacation_edit_reason        = $("#personnel_attendance_vacation_edit_reason"),         //修改原因
    personnel_attendance_vacation_edit_tab1          = $("#personnel_attendance_vacation_edit_tab1"),           //调休时长
    personnel_attendance_vacation_edit_tab2          = $("#personnel_attendance_vacation_edit_tab2"),           //修改记录
    personnel_attendance_vacation_edit_submit        = $("#personnel_attendance_vacation_edit_submit");         //修改提交

    //接口对象-----------------------------------------------------------------------------------------------
    if( window.STATE == "local" ){

        //本地接口
        var personnel_attendance_vacation_api = {
            datagrid  : LOCAL + "Test/Personnel/Attendance/vacation.json",              //数据表格
            edit_type : LOCAL + "Test/Personnel/Attendance/vacation_edit_type.json",    //修改类型
            edit_tabs : LOCAL + "Test/Personnel/Attendance/vacation_edit_tabs.json",    //修改表格
            select    : LOCAL + "Test/test_select.json",                                //下拉选择
        }

    } else if ( window.STATE == "route" ){

        //远程接口
        var personnel_attendance_vacation_api = {
            datagrid  : LOCAL + "Test/Personnel/Attendance/vacation.json",              //数据表格
            edit_type : LOCAL + "Test/Personnel/Attendance/vacation_edit_type.json",    //修改类型
            edit_tabs : LOCAL + "Test/Personnel/Attendance/vacation_edit_tabs.json",    //修改表格
            select    : LOCAL + "Test/test_select.json",                                //下拉选择
        }

    }
 
    //数据表格-----------------------------------------------------------------------------------------------
    personnel_attendance_vacation_datagrid.datagrid({
        height      : zui_datagrid_height(personnel_attendance_vacation_datagrid),
        sortable    : false,
        cache       : false,
        showRowIndex: true,
        configs     : {
            R0:{className:"text-center"},
            C1:{className:"cell-hidden"}
        },
        states      : {
            fixedLeftUntil  : 3,
            pager           : {
                page        : 1,
                recPerPage  : window.REC_PER_PAGE,
            }
        },
        dataSource : {
            cols   : [
                {html:true,width:49, name:"id",     label:"ID"        },
                {html:true,width:80, name:"user",   label:"姓名"      },
                {html:true,width:80, name:"numb",   label:"工号"      },
                {html:true,width:80, name:"depart", label:"部门"      },
                {html:true,width:80, name:"leave1", label:"事假"      },
                {html:true,width:80, name:"leave2", label:"病假"      },
                {html:true,width:80, name:"remain1",label:"剩余调休"  },
                {html:true,width:80, name:"remain2",label:"剩余年假"  },
                {html:true,width:80, name:"remain3",label:"剩余婚假"  },
                {html:true,width:80, name:"remain4",label:"剩余产假"  },
                {html:true,width:100,name:"remain5",label:"剩余陪产假"},
                {html:true,width:100,name:"remain6",label:"剩余哺乳假"},
            ],
            remote : function(){
                return {
                    url     : personnel_attendance_vacation_api.datagrid,
                    type    : "POST",
                    dataType: "json",
                }
            }
        },
        valueOperator : {
            string : {
                getter : function(dataValue,cell,dataGrid){
                    var resu = "";
                    if( cell.colIndex>4 && dataValue!="不限余额" ){ 
                        resu = '<a class="personnel_attendance_vacation_edit_btn" rowIndex="'+ cell.rowIndex +
                               '" colName ="'+ cell.config.name  +
                               '" colLabel="'+ cell.config.label +
                               '" >'+dataValue+'</a>';
                    } else if( cell.colIndex>4 && dataValue=="不限余额" ) { 
                        resu = '<a class="personnel_attendance_vacation_unli_btn">'+dataValue+'</a>';
                    } else { 
                        resu = dataValue; 
                    }
                    return resu;
                }
            }
        }
    });//datagrid()

    //变量声明-----------------------------------------------------------------------------------------------
    var 
    personnel_attendance_vacation_datagrid_obj  = personnel_attendance_vacation_datagrid.data("zui.datagrid"),  //表格对象
    personnel_attendance_vacation_edit_btn      = ".personnel_attendance_vacation_edit_btn",                    //修改按钮
    personnel_attendance_vacation_unli_btn      = ".personnel_attendance_vacation_unli_btn";                    //不限余额
 
    //下拉选项-----------------------------------------------------------------------------------------------
    common_select_linkage("#personnel_attendance_vacation_tool_select_group","1");                              //搜索

    //修改类型
    $.ajax({
        url     : personnel_attendance_vacation_api.edit_type,
        type    : "post",
        dataType: "json",
        data    : {},
        success : function(data){
            if( data.status>0 ){
                var data = data.data;
                var option = "";
                for(var i=0;i<data.length;i++){
                    option += "<option value='"+data[i].id+"'>"+data[i].name+"</option>"
                }
                personnel_attendance_vacation_edit_type.html(option);
            }
        }
    });

    //搜索按钮-----------------------------------------------------------------------------------------------
    personnel_attendance_vacation_search_btn.click(function(){

        //字段整理
        var keyword
        = "?sid="    + personnel_attendance_vacation_tool_keys.val()
        + "&search=" + personnel_attendance_vacation_tool_search.val()
        + "&depart=" + personnel_attendance_vacation_tool_select_group.find(".common_select_depart").val();

        //GET提交
        zui_datagrid_render(personnel_attendance_vacation_datagrid_obj,personnel_attendance_vacation_api.datagrid+keyword);

    });

    //修改按钮-----------------------------------------------------------------------------------------------
    $(document).on("click",personnel_attendance_vacation_edit_btn,function(){

        //变量声明
        var data_id = zui_datagrid_get_id($(this).attr("rowIndex"));                               //数据ID
        var colName = $(this).attr("colName");                                              //列name
        var colLabel= $(this).attr("colLabel");                                             //列label

        //数据赋值
        $.ajax({
            url : personnel_attendance_vacation_api.edit_tabs,
            type: "post",
            data : { id : data_id },
            success : function(data){

                if( data.status>0 ){
                    //调休时长
                    var personnel_attendance_vacation_edit_tab1_temp = "";
                    for( var i=0;i<data.tab1.length;i++ ){
                        personnel_attendance_vacation_edit_tab1_temp += `
                            <tr>
                                <td>${data.tab1[i].editname}</td>
                                <td>${data.tab1[i].edittext}</td>
                                <td>${data.tab1[i].edituser}</td>
                                <td>${data.tab1[i].edittime}</td>
                            </tr>
                        `;
                    }
                    personnel_attendance_vacation_edit_tab1.find("tbody").html(personnel_attendance_vacation_edit_tab1_temp);

                    //修改记录
                    var personnel_attendance_vacation_edit_tab2_temp = "";
                    for( var j=0;j<data.tab2.length;j++ ){
                        personnel_attendance_vacation_edit_tab2_temp += `
                            <tr>
                                <td>${data.tab2[j].datetime}</td>
                                <td>${data.tab2[j].duration}</td>
                                <td>${data.tab2[j].failtime}</td>
                            </tr>
                        `;
                    }
                    personnel_attendance_vacation_edit_tab2.find("tbody").html(personnel_attendance_vacation_edit_tab2_temp);
                    
                    //其他操作
                    personnel_attendance_vacation_edit_submit.attr("dataId",data_id);                   //变量传递        
                    personnel_attendance_vacation_edit_submit.attr("colName",colName);                  //变量传递
                    personnel_attendance_vacation_edit_box.find(".modal-title").html(colLabel+"修改");  //标题推进
                    personnel_attendance_vacation_edit_box.modal("show");                               //面板显示

                } else {
                    um_tip(data.message,"1500","text-danger");
                }

            }
        });

    });
    //修改提交
    personnel_attendance_vacation_edit_submit.click(function(){

        //变量声明
        var data_id = $(this).attr("dataId");                                                //数据ID
        var colName = $(this).attr("colName");                                               //操作类型
    
        //远程提交
        $.ajax({
            url : API.test_response,
            type: "post",
            data: {
                name    : colName,
                id      : data_id,
                type    : personnel_attendance_vacation_edit_type.val(),
                duration: personnel_attendance_vacation_edit_duration.val(),
                reason  : personnel_attendance_vacation_edit_reason.val(),
            },
            success : function(data){

                if( data.status>0 ){
                    um_tip(data.message);
                    zui_datagrid_reset(personnel_attendance_vacation_datagrid_obj,personnel_attendance_vacation_api.datagrid);
                } else {
                    um_tip(data.message,"1500","text-danger");
                }

            }
        });

    });

    //不限余额
    $(document).on("click",personnel_attendance_vacation_unli_btn,function(){
        $("#common_tree li a span[text='假期管理']").trigger("click");
    });
    
});//预加载结尾
</script>